<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络测试页面 - 修复版</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
        .container { background-color: #f5f5f5; padding: 20px; border-radius: 8px; }
        .result { margin-top: 20px; padding: 10px; border-radius: 4px; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        button { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <h1>心理测评系统 - 网络连通性测试</h1>
        <p>本页面用于测试从局域网访问时，前端与后端的通信是否正常。已修复API路径配置问题。</p>
        
        <h3>当前网络信息</h3>
        <p>您正在通过：<span id="current-ip"></span> 访问本页面</p>
        
        <h3>API配置信息</h3>
        <p>前端API基础路径：<strong>空字符串</strong>（后端路由已包含/api前缀）</p>
        <p>预期请求路径：<strong>/api/assessments</strong></p>
        
        <h3>测试后端连接</h3>
        <button id="test-backend-btn">测试后端API连接</button>
        
        <div id="test-result" class="result"></div>
    </div>

    <script>
        // 显示当前访问的IP
        document.getElementById('current-ip').textContent = window.location.host;
        
        // 测试后端API连接
        document.getElementById('test-backend-btn').addEventListener('click', async function() {
            const resultElement = document.getElementById('test-result');
            resultElement.innerHTML = '正在测试连接...';
            
            try {
                // 直接使用/api/assessments路径
                const response = await fetch('/api/assessments');
                
                if (response.ok) {
                    const data = await response.json();
                    resultElement.className = 'result success';
                    resultElement.innerHTML = `
                        <h4>连接成功！</h4>
                        <p>后端API响应正常，获取到 ${data.length} 个测评项目</p>
                        <p>测试URL: /api/assessments</p>
                        <p>HTTP状态码: ${response.status}</p>
                        <pre>响应数据示例：${JSON.stringify(data.slice(0, 2), null, 2)}</pre>
                    `;
                } else {
                    resultElement.className = 'result error';
                    resultElement.innerHTML = `
                        <h4>连接失败</h4>
                        <p>后端API返回错误状态码: ${response.status}</p>
                        <p>请检查后端服务是否正常运行</p>
                    `;
                }
            } catch (error) {
                resultElement.className = 'result error';
                resultElement.innerHTML = `
                    <h4>连接错误</h4>
                    <p>无法连接到后端服务：${error.message}</p>
                    <p>请检查后端服务是否启动，以及网络配置是否正确</p>
                `;
            }
        });
    </script>
</body>
</html>